
.index {
  display: flex;
  flex-direction: column;
  width: 100%;
  // align-items: center;
  height: 100vh;
}

.swiper {
  // background-color: red;
  width: 100%;
  min-height: 375px;
}

.swiper_item {
  width: auto;
}

.banner_container {
  // background-color: yellow;
}

.banner_img {
  width: 750px;
}

.vertial_box {
  display: flex;
  // background-color: goldenrod;
  flex-direction: row;
  height: calc(100vh - 375px);
}

.vertial_nav {
  flex: 1;
}

.vertial_main {
  // margin: 0px 20px;
  // margin-bottom: 20px;
  flex: auto;
}

.vertial_nav_item_box {
  // height: 50px;
  width: 150px;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  margin-right: 20px;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #ff7214;
  background-color: transparent;
}

.cuIcon-title:before {
	content: "\e82f";
}

.dot {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-color: #ff7214;
}

.main_item_title {
  margin-left: 10px;
}

.main_item_box_wrap {
  padding-top: 20px;
}

.main_item_box {
  display: flex;
  flex-direction: column;
  // border: solid 1px red;
  margin-right: 20px;
  background-color: white;
  border-radius: 20px;
}

.main_last_item_box {
  // margin-bottom: 20px; // margin-bottom will be ignore in case no other element after it
  // border: solid 1px gold;
}

.space_separator {
  height: 20px;
}

.test_box {
  border: outset 1px yellowgreen;
}

.main_item_title_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: solid rgba(224, 224, 224, 0.6); // #ff7214; // #39b54a;
  border-width: 0px 0px 1px;
  padding: 20px;
}

.cu-avatar {
	font-variant: small-caps;
	margin: 0;
	padding: 0;
	display: inline-flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	background-color: #ccc;
	color: #ffffff;
	white-space: nowrap;
	position: relative;
	width: 64px;
	height: 64px;
	background-size: cover;
	background-position: center;
	vertical-align: middle;
	font-size: 1.5em;
}